<template>
    <div class="warp">
        <div class="order_tabs-pane list" v-for="(x,index) in tabsList" :key="x.id" v-loading="loading">
            <div class="title_button"><span>{{x.parameter}}</span></div>
            <el-radio-group v-model="EditCheckedData[x.parameter]" @change="(item) => radioChange(item,x.parameter)">
                <el-radio-button :disabled="y.not==1" v-for="y in x.categoryInfoList"
                :key="y.id"
                :label="y.id"
                :value="y.categoryName"
                @change="radioChange">
                    <div><img :src="y.img" alt=""></div>
                <strong>{{y.categoryName}}</strong>
                </el-radio-button>
            </el-radio-group>
        </div>
<!--        <div class="list" v-for="(x,index) in sliderData" :key="x.id">-->
<!--            <div class="title_button"><span>{{x.parameter}}</span></div>-->
<!--            <el-slider-->
<!--            v-model="x.unit"-->
<!--            :step="1"-->
<!--            :max="x.categoryInfoList.length - 1"-->
<!--            :format-tooltip="timestepToolTip(x.categoryInfoList)"-->
<!--            @change="(val) => sliderChange(val,x)"-->
<!--            show-stops>-->
<!--            </el-slider>-->
<!--        </div>-->
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    name: 'Tabs4',
    props:['switch'],
    data() {
        return{
            loading:false,
            tabsList:[],
            sliderData: [],//滑块数据
            states: true,//true重新绑定
            EditCheckedData: this.$store.state.OrderUser.EditCheckedData['ksgy']
        }
    },
    computed: {
        getTypeids() {
            return this.$store.getters.getOrder_user_category_id();
        },
        sSwitch() {
            return this.switch;
        },
        switchKSGY() {
            return this.$store.state.OrderUser.Order_user_Info_temp.id;
        }
    },
    methods: {
        async tabOpenBind() {
            if(this.states) {
                this.loading=true;
                this.states = false;
                var formData = new FormData();
                formData.append("token", localStorage.getItem("token"));
                formData.append("mouldid", "3");
                formData.append("typeids", this.$store.getters.getOrder_user_category_id('plbx'));
                await this.$http.post('/fabricAndOther/getTypeAndProcess',formData).then( async(result) => {
                    this.tabsList = result.data.data;
                    this.loading=false;
                });
                var huakuanData = new FormData();
                huakuanData.append("token", localStorage.getItem("token"));
                huakuanData.append("mouldid", "3");
                await this.$http.post('/fabricAndOther/getBokuan',huakuanData).then( async(result) => {
                    result.data.data.map((item,index) => {
                        if(item.parameter == '驳款') {
                            if(!this.$store.state.OrderUser.Order_user_Info_temp.bokuan) {
                                this.$store.state.OrderUser.Order_user_Info_temp.bokuan = item.categoryInfoList[0].id;
                            }else {
                                //复位
                                for(let i=0;i<item.categoryInfoList.length;i++) {
                                    if(item.categoryInfoList[i].id == this.$store.state.OrderUser.Order_user_Info_temp.bokuan) {
                                        item.unit = i;
                                    }
                                }
                            }
                        }else {
                            if(!this.$store.state.OrderUser.Order_user_Info_temp.zhubianWidth){
                                this.$store.state.OrderUser.Order_user_Info_temp.zhubianWidth = item.categoryInfoList[0].id;
                            }else {
                                //复位
                                for(let i=0;i<item.categoryInfoList.length;i++) {
                                    if(item.categoryInfoList[i].id == this.$store.state.OrderUser.Order_user_Info_temp.zhubianWidth) {
                                        item.unit = i;
                                    }
                                }
                            }
                        }
                    });
                    this.sliderData = result.data.data;
                });
            }
        },
        timestepToolTip(list) {
            return function(index) {
                return index == null ? list[0].categoryName : list[index].categoryName;
            }
        },
        radioChange(val,tname) {
            Vue.set(this.$store.state.OrderUser.Order_user_gongyiIDs,tname,val);
        },
        sliderChange(val,x) {
            if(x.parameter == '驳款') {
                this.$store.state.OrderUser.Order_user_Info_temp.bokuan = x.categoryInfoList[val].id;
            }else {
                this.$store.state.OrderUser.Order_user_Info_temp.zhubianWidth = x.categoryInfoList[val].id;
            }
        }
    },
    watch: {
        getTypeids() {
            this.states = true;
        },
        sSwitch(active) {
            if(active == 3) {
                this.tabOpenBind();
            }
        },
        switchKSGY() {
            this.EditCheckedData = this.$store.state.OrderUser.EditCheckedData['ksgy']
            this.tabOpenBind();
        }
    },
}
</script>

<style scoped lang="scss">
.warp{margin-left: 60px;}
.title_button{display: flex; margin-bottom: 20px;}
.title_button span{ border-radius: 5px; padding: 8px 30px;
    font-weight: bold; font-size: 15px;
    background: $color; color: $font_color;}
.list{margin-bottom: 30px;}


/*滑块球背景色*/
.el-slider{width: 400px;}
.list /deep/ .el-slider__button{background: $color; width: 12px; height: 12px;}
.list /deep/ .el-slider__stop{background: rgba(238, 201, 9, 1);}
</style>
